<template>
    <div class="station-information">
        <el-descriptions title="RTU工况" :column="2" :size="size" border>
            <el-descriptions-item label="时间"> 2023-2-24 18:59:34</el-descriptions-item>
            <el-descriptions-item label="蓄电池">
                <i :class="currentComponentData.type == '1' ? 'el-icon-success' : 'el-icon-error'"></i>
            </el-descriptions-item>
            <el-descriptions-item label="电压">0</el-descriptions-item>
            <el-descriptions-item label="交流电告警">
                <i :class="currentComponentData.type == '1' ? 'el-icon-success' : 'el-icon-error'"></i>
            </el-descriptions-item>
            <el-descriptions-item label="水泵开停告警">
                <i :class="currentComponentData.type == '1' ? 'el-icon-success' : 'el-icon-error'"></i>
            </el-descriptions-item>
            <el-descriptions-item label="终端箱门告警">
                <i :class="currentComponentData.type == '1' ? 'el-icon-success' : 'el-icon-error'"></i>
            </el-descriptions-item>
        </el-descriptions>
        <el-descriptions class="margin-top" title="传感器工况" :column="2" :size="size" border>
            <el-descriptions-item label="时间">2023-2-24  18:59:34</el-descriptions-item>
            <el-descriptions-item label="流量">
                11
            </el-descriptions-item>
            <el-descriptions-item label="流量仪表">
                <i :class="currentComponentData.type == '1' ? 'el-icon-success' : 'el-icon-error'"></i>
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    累计流量&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                </template>
                11
            </el-descriptions-item>
            <el-descriptions-item label="水位仪表">
                <i :class="currentComponentData.type == '1' ? 'el-icon-success' : 'el-icon-error'"></i>
            </el-descriptions-item>
            <el-descriptions-item label="水位">
                11
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    终端IC卡&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                </template>
                <i :class="currentComponentData.type == '1' ? 'el-icon-success' : 'el-icon-error'"></i>
            </el-descriptions-item>
            <el-descriptions-item></el-descriptions-item>
        </el-descriptions>
    </div>
</template>

<script>
export default {
    name: 'station-information',
    props: {
       currentComponentData: {
        type: Object,
        default: () => {}
       }
    },

    created() {
        
    },

    data() {
        return {
            size: 'mini'
        };
    },

    methods: {
        
    }
};
</script>

<style lang="scss" scoped>
    .station-information {
            width: 100%;
            height: 100%;
            padding: 0 10px 15px;
            box-sizing: border-box;
    }

    .margin-top {
            margin-top: 15px;
    }

    .el-icon-success {
            color: #67C23A;
            font-size: 16px;
    }

    .el-icon-error {
            color: #F56C6C;
            font-size: 16px;
    }
    :deep {
        .el-descriptions .is-bordered .el-descriptions-item__cell {
            border: 1px solid #fff;
        }
        .el-descriptions-item__label.is-bordered-label {
            background: rgba($color: #98E4F3, $alpha: 0.2);
        }
        .el-descriptions__body {
            background-color: rgba(255,255,255,0.4);
        }
    }
    
</style>